<template>
	<view class="placeOrder">
		<view class="receiveInfo">
			<view class="leftImage">
				<image src="../../../static/img/location.png" mode=""></image>
			</view>
			<view class="rightInfo" @click="selectAddr">
				<view class="line">
					<view class="name">{{name}}</view>
					<view class="mobile">{{mobile}}</view>
				</view>
				<view class="address">
					<span>{{address}}</span>
					<image class="arrowImage" src="../../../static/img/arrowRight.png" mode="">
					</image>
				</view>
			</view>
		</view>

		<!-- 		<view class="info">
			<view class="item">
				<text>收货人</text>
				<input class="uni-input" type="text" style="width: 66%;" v-model="name" placeholder="请填写收货人姓名"
					placeholder-style="color:#cccccc" />
				<icon type="search" size="20" @click="selectAddr" class="searchIcon" />
			</view>
			<view class="item">
				<text>手机号</text>
				<input class="uni-input" type="number" maxlength="11" v-model="mobile" placeholder="请填写收货人手机号码"
					placeholder-style="color:#cccccc" />
			</view>

			<view class="item">
				<text>详细地址</text>
				<textarea v-model="address" placeholder="请填写详细地址，不少于4字" maxlength="50"
					placeholder-style="line-height:1.8!import;color:#cccccc" placeholder-class="phStyle" />
			</view>

		</view> -->


		<view class="productWrap">
			<view class="left">
				<image class="imageWrap" :src="productSrc" mode=""></image>
				<span>{{ productName }}</span>
			</view>
			<view class="right">
				<span class="amount">共1件</span>
			</view>
		</view>
		<view class="info">
			<view class="item between">
				<text>微信支付</text>
				<view>
					<radio :value="radioValue" checked="radioValue" />
				</view>
			</view>
		</view>
		<view class="info">
			<view class="remark">
				<text>选填:</text>
				<input class="remarkInput" type="text" v-model="remark" placeholder="给商家留言"
					placeholder-style="color:#cccccc;font-size: 14px;" />
			</view>
		</view>
		<view class="info proMoney">
			<view class="item between">
				<text>商品金额</text>
				<text class="red">￥{{orderMoney}}</text>
			</view>
		</view>
		<view class="info">
			<view class="item between">
				<text>运费</text>
				<text class="red">￥0.00</text>
			</view>
		</view>

		<view class="footerFixed">
			<view class="left">
				<view>实付款:</view>
				￥
				<view class="price">{{ orderMoney }}</view>
			</view>
			<view class="buyBtn order" @click="groupbuyEdit" hover-class="show_buyPoup_hover">提交拼团</view>
		</view>
	</view>
</template>

<script>
	import API from '@/common/api';
	import utils from '@/common/utils';
	import uniIcon from '@/components/uni-icon.vue';
	export default {
		data() {
			return {
				productId: null,
				title: '玖玖优拼',
				mobile: '',
				name: '',
				productSrc: '',
				productName: '',
				orderMoney: 0,
				loading: false,
				radioValue: true,
				address: '请选择收货地址',
				remark: ''
			};
		},
		components: {
			uniIcon
		},
		onLoad(options) {
			// decodeURIComponent 解密传过来的对象字符串
			const item = JSON.parse(decodeURIComponent(options.item));
			console.log(item, "456789")
			this.productId = item.productId;
			this.productName = item.productName;
			this.productSrc = item.productSrc;
			this.orderMoney = item.price / 100;
			this.groupbuyOrderList();
		},
		methods: {
			async groupbuyOrderList() {
				let json = await API.groupbuyOrderList({
					limit: 1,
					page: 0,
					userId: uni.getStorageSync('uid'),
				});
				if (json.code == 200) {
					console.log(json, "8888")
					if (json.data && json.data.length > 0) {
						this.address = json.data[0].address
						this.name = json.data[0].name
						this.mobile = json.data[0].mobile
					}
				}
			},
			async groupbuyEdit() {
				let json = await API.groupbuyOrderEdit({
					address: this.address,
					mobile: this.mobile,
					name: this.name,
					remark: this.remark,
					productId: this.productId
				});
				if (json.code == 200) {
					this.requestPay(json)
				}
			},
			requestPay(json) {
				let paymentData = json.data.thirdPayInfo;
				console.log(paymentData, "22222")
				uni.requestPayment({
					// appId: paymentData.appId,
					timeStamp: paymentData.timeStamp,
					nonceStr: paymentData.nonceStr,
					package: paymentData.packageValue,
					signType: 'MD5',
					paySign: paymentData.paySign,
					success: (res) => {
						uni.showToast({
							title: "支付成功!"
						})

						uni.requestSubscribeMessage({
							tmplIds: ['leN8hTHndxwTEVYCZRs1rOhqxK_FieHlXuBSaX6TOQ4'],
							complete: () => {
								uni.navigateBack({
									animationDuration: 100
								})
							}
						})
					},
					fail: (res) => {
						uni.showModal({
							content: '支付失败或取消，您可以在个人中心继续支付。',
							showCancel: false
						})
					},
					complete: () => {
						this.loading = false;
					}
				})
			},
			selectAddr() {
				let that = this;
				uni.chooseAddress({
					success(address) {
						that.name = address.userName;
						that.mobile = address.telNumber;
						that.address = address.provinceName + address.cityName + address.countyName + address
							.detailInfo;
					}
				});
			}
		}
	};
</script>

<style lang="less">
	.placeOrder {
		overflow: auto;

		view {
			display: flex;
		}

		.receiveInfo {
			background: white;
			display: flex;
			padding: 40rpx 30rpx;

			.leftImage {
				margin-right: 20rpx;
				align-items: center;
				image {
					width: 60upx;
					height: 60upx;
				}
			}

			.rightInfo {
				flex-direction: column;
				flex-grow: 1;
				.line {
					display: flex;
					align-items: center;
					margin-bottom: 14rpx;
					.name {
						color: #333333;
						margin-right: 20px;
					}

					.mobile {
						color: #cccccc;
						font-size: 14px;
					}
				}

				.address {
					font-size: 14px;
					color: #666666;
					justify-content: space-between;
					align-items: center;

					.arrowImage {
						width: 40upx;
						height: 40upx;
					}
				}
			}
		}

		.productWrap {
			padding: 14rpx 30rpx;
			justify-content: space-between;
			background: white;
			margin: 18rpx 0;
			font-size: 30rpx;

			.left {
				width: 80%;
				align-items: center;

				.imageWrap {
					width: 50px;
					height: 50px;
					margin-right: 10px;
				}

				span {
					width: 64%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

			}

			.right {
				width: 20%;
				align-items: center;
				justify-content: flex-end;
			}

		}

		.info {
			flex-direction: column;
			background: white;
			padding: 0 30upx;
			box-sizing: border-box;

			.item {
				display: flex;
				flex-grow: 1;
				border-bottom: 1px solid #eeeeee;
				height: 80upx;
				align-items: center;
				position: relative;

				// border: 1px solid red;
				text:first-child {
					width: 22%;
					font-size: 30upx;
					color: #333333;
				}

				.uni-input {
					padding-left: 0;
					font-size: 30upx;
					color: #333333;
				}

				.searchIcon {
					position: absolute;
					right: 10px;
					top: 30%;
					bottom: 0;
				}
			}

			.item:last-child {
				height: 120upx;
				align-items: flex-start;
				padding: 20upx 0;

				text {
					line-height: 1.8;
				}

				textarea {
					// border: 1px solid red;
					padding-left: 18upx;
					font-size: 30upx;
					height: 120upx;
					line-height: 1.8;
				}
			}

			.remark {
				margin: 20px 0;
				color: #cccccc;
				font-size: 14px;

				text {
					color: #cccccc;
					margin-right: 10px;
				}

				.remarkInput {
					width: 80%;
				}


			}

			.between {
				display: flex;
				height: 80upx !important;
				justify-content: space-between;
				align-items: center !important;
				line-height: 80upx;

				.red {
					color: red;
				}
			}
		}

		.proMoney {
			margin-top: 18rpx;
		}

		.footerFixed {
			background: white;
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			height: 110upx;
			box-shadow: 0 0 0.277778rem #e8e6e6;

			.left {
				padding-right: 30upx;
				width: 70%;
				box-sizing: border-box;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				font-size: 28upx;
				color: red;

				.price {
					font-size: 36upx;
					color: #ff1268;
					margin-left: 16upx;
				}
			}

			.order {
				width: 36%;
				justify-content: center;
				align-items: center;
				font-size: 32upx;
				background: #0796fa;
				color: white;
			}
		}
	}
</style>
